<template>
  <div>
    <span>文章数量:{{bookInfos.total_count}}</span>
    <ul class="items">
      <li v-for="item in bookInfos.items" :key="item._id" class="item">
        <article class="item-content">
          <div class="item-content-left">
            <h3>{{item.title}}</h3>
          </div>
          <div class="item-content-right">
            <img :src="item.note_image" alt="图片" :title="item.title">
          </div>
        </article>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  asyncData ({ store, route }) {
    // 触发 action 后，会返回 Promise
    return store.dispatch('reqBookInfo')
  },
  computed: {
    // 从 store 的 state 对象中的获取 item。
    bookInfos () {
      return this.$store.state.items
    }
  }
}
</script>

<style lang="stylus" scoped>
  .items
    width: 500px;
    list-style-type: none;
    .item
      .item-content
        display: flex;
        width: 100%;
        .item-content-left
          width: 70%;
          h3
            font-size: 14px;
        .item-content-right
          flex: 1;
          img
            width: 120px;
            height: 80px;
</style>
